import {replaceByObj} from "./xUtil.js";
import xGrid from './xGrid.js';
import xImage from "./xImage.js";
import xID  from "./xID.js";
import cell from "./cell.js";
import xTable from "./xTable.js";
/**
cfg:
{
 el: "div1",
 binds: binds,
 col:'col-md-4', //默认缺省的 col 设置
 obj: obj,
 style:""
 grid:""
 }
 首先 生成框架
 然后 再渲染 单个 控件
 */
const tmplBase = `<div class="{{class}}">
                    <div type ="panel-main" > 
                                                      
                    </div>
                 </div> `

const tmplItem = `<div type ="panel-item"> 
{{label}}
{{cellHtml}}
    </div>`;

const tmplTable =`<div type ="panel-table" id="{{id}}"> </div>`;

export default class vwPanel {
    $root;
    $main;
    vCfg;
    // 构造函数
    constructor(cfg) {
        this.vCfg = cfg;
        this.$root = $('#' + cfg.el);
        this.$root.html(tmplBase.replace('{{class}}', cfg.style||'panel'));
        this.$root.on('click','img',this.evImg.bind(this));
        this.$main = this.$root.find('[type="panel-main"]');
    };

    /* 渲染区块 开始 */

    renderGrid() {
        this.$main.html(xGrid.renderGrid({
            data: this.getViewData(),
            cbRenderCell: this.renderCell.bind(this),
            grid: this.vCfg.grid,
            col: this.vCfg.col||'col-md-6',
            group: this.vCfg.group
        }));

        this.renderTable();
    }

    getViewData(){
        let obj ;
        let data = [];
        for(let i =0;i<this.vCfg.data.length;i++){
            obj = {};
            obj.data = this.vCfg.obj[this.vCfg.data[i].$data];
            obj.badge = this.vCfg.data[i].$badge?this.vCfg.obj[this.vCfg.data[i].$badge]:null;
            obj.level = this.vCfg.data[i].$level?this.vCfg.obj[this.vCfg.data[i].$level]:null;
            obj.image = this.vCfg.data[i].$image?this.vCfg.obj[this.vCfg.data[i].$image]:null;
            obj.icon = this.vCfg.data[i].$icon?this.vCfg.obj[this.vCfg.data[i].$icon]:null;
            obj.link = this.vCfg.data[i].$link?this.vCfg.obj[this.vCfg.data[i].$link]:null;
            obj.size = this.vCfg.data[i].size;

            obj.hint = this.vCfg.data[i].hint;
            obj.align = this.vCfg.data[i].align;
            obj.style = this.vCfg.data[i].style;
            obj.width = this.vCfg.data[i].width;
            obj.minwidth = this.vCfg.data[i].minwidth;
            obj.label = this.vCfg.data[i].label||this.vCfg.data[i].title;
            obj.col = this.vCfg.data[i].col;
            obj.type = this.vCfg.data[i].type;
            obj.group = this.vCfg.data[i].group;
            obj.format = this.vCfg.data[i].format;
            obj.code = this.vCfg.data[i].code;
            obj.placeholder = this.vCfg.data[i].placeholder;
            obj.render = this.vCfg.data[i].render;
            obj._from = this.vCfg.data[i];

            data.push(obj);
        }
        return data;
    }

    renderCell(item) {
        let label ='';
        if(item.label)
            label = cell.renderLabel({type:'label',label:item.label});

        if(item.type=='table'){
            item._from._tableId= xID.getID();
            return replaceByObj(tmplTable,{
                 id:item._from._tableId
            });
        }
        else {
            if(item.render){
                return replaceByObj(tmplItem,{label,
                    cellHtml:cell.renderByCallback(item,item.render)});
            }else{
                return replaceByObj(tmplItem,{label,
                    cellHtml:cell.render({
                        ...item
                    })});
            }
        }

    }

    evImg(e){
        xImage.pop($(e.target));
    }

    renderTable(){
        for(let i=0;i<this.vCfg.data.length;i++){
            if(this.vCfg.data[i].type=='table' && this.vCfg.data[i]._tableId){
                let tableCfg = {
                    el:this.vCfg.data[i]._tableId,
                    ...this.vCfg.data[i].cfg
                }
                this.vCfg.data[i]._tableInstance = new xTable(tableCfg);
                let _this = this;
                if(this.vCfg.data[i].load){
                    //回调函数 设置表格数据
                    this.vCfg.data[i].load( _this.vCfg.obj ,(res) => {
                        _this.vCfg.data[i]._tableInstance.setData(res.data);
                    });
                }
            }
        }
    }

    refresh(obj){
        if(obj)
            this.vCfg.obj = obj;
        this.renderGrid();
    }

}